<template>
  <div class="app-container">
    <div class="step">
      <div class="step-btm">
        <!-- 金丹企业生产资质 -->
        <el-divider content-position="left">金丹企业生产资质</el-divider>
        <div class="fileup">
        	<div class="uping" v-for="(item,index) in fileNum1" :key="index">
						<p>
							<span>图片名</span>
							<input v-model="item.verifyName" type="text" placeholder="请输入您要上传的图片名" />
						</p>
						<p>
							<span>上传图片</span>
							<el-upload
							  class="avatar-uploader"
							  action=""
								drag
								:data="index"
								:http-request="designUpFile1"
							  :show-file-list="false"
							>
							  <img v-if="item.verifyUrl" :src="item.verifyUrl" class="avatar" />
							  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</p>
						<i class="el-icon-close delete" @click="deleteFile(item)"></i>
        	</div>
					<div class="submits">
						<div class="add" @click="add1">新增</div>
					</div>
        </div>
        <!-- 金丹企业证书 -->
        <el-divider content-position="left" style="color: #18A05E;">金丹企业证书</el-divider>
        <div class="fileup">
        	<div class="uping" v-for="(item,index) in fileNum2" :key="index">
        		<p>
        			<span>图片名</span>
        			<input v-model="item.verifyName" type="text" placeholder="请输入您要上传的图片名" />
        		</p>
        		<p>
        			<span>上传图片</span>
        			<el-upload
        			  class="avatar-uploader"
        			  action=""
        				drag
        				:data="index"
        				:http-request="designUpFile2"
        			  :show-file-list="false"
        			>
        			  <img v-if="item.verifyUrl" :src="item.verifyUrl" class="avatar" />
        			  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        			</el-upload>
        		</p>
						<i class="el-icon-close delete" @click="deleteFile(item)"></i>
        	</div>
        	<div class="submits">
        		<div class="add" @click="add2">新增</div>
        	</div>
        </div>
        <!-- 金丹企业荣誉 -->
        <el-divider content-position="left">金丹企业荣誉</el-divider>
        <div class="fileup">
        	<div class="uping" v-for="(item,index) in fileNum3" :key="index">
        		<p>
        			<span>图片名</span>
        			<input v-model="item.verifyName" type="text" placeholder="请输入您要上传的图片名" />
        		</p>
        		<p>
        			<span>上传图片</span>
							<el-upload
							  class="avatar-uploader"
							  action=""
								drag
								:data="index"
								:http-request="designUpFile3"
							  :show-file-list="false"
							>
							  <img v-if="item.verifyUrl" :src="item.verifyUrl" class="avatar" />
							  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
        		</p>
						<i class="el-icon-close delete" @click="deleteFile(item)"></i>
        	</div>
        	<div class="submits">
        		<div class="add" @click="add3">新增</div>
        	</div>
        </div>
        <!-- <h6 class="addfile" @click="addfile">新增</h6> -->
      </div>
      <!-- <div class="submits">
        <div class="save" @click="save" v-else>确认信息</div>
        <div class="nosave" @click="nosave">取消</div>
      </div> -->
    </div>
  </div>
</template>

<script> 
import { uploadFile,addPeople } from '@/api/people'
import { selectYzImg,addYzImg,updateYzImg,deleteYzImg } from '@/api/ewmApi'
export default {
  data() {
    return {
      imageUrl: "",
      tempData: null,
      productlist: [],  //生产资质列表
      qiyelist: [],   //企业证书
      rongyulist: [],   //企业证书
			fileNum1: [{
				verifyName: '',
				verifyUrl: ''
      }],   //需要上传的文件个数
      fileNum2: [{
      	verifyName: '',
				verifyUrl: ''
      }],   //需要上传的文件个数
			fileNum3: [{
				verifyName: '',
				verifyUrl: ''
			}],   //需要上传的文件个数
			bumenList: [],
      value: null
    };
  },
  mounted() {
    console.log(this.$route.params)
		this.getImg()
  },
  methods: {
		getImg(){
			selectYzImg({}).then(res => {
				console.log(res)
				const file1 = res.data.filter(item => item.types == 'zizhi')
				const file2 = res.data.filter(item => item.types == 'zhengshu')
				const file3 = res.data.filter(item => item.types == 'rongyu')
				console.log(file1,file2,file3)
				if(file1.length != 0){
					this.fileNum1 = file1
				}
				if(file2.length != 0){
					this.fileNum2 = file2
				}
				if(file3.length != 0){
					this.fileNum3 = file3
				}
			})
		},
		add1(){
			this.fileNum1.push({
				verifyName: ''
			})
		},
		add2(){
			this.fileNum2.push({
				verifyName: ''
			})
		},
		add3(){
			this.fileNum3.push({
				verifyName: ''
			})
		},
		// 上传文件（金丹企业生产资质）
    designUpFile1(item) {
			console.log(this.fileNum)
      var formData = new FormData()
      formData.append("file", item.file)
			// formData.append('content',this.fileNum1[item.data].filename)
      uploadFile(formData).then(res => {
        console.log(res)
        this.fileNum1[item.data].verifyUrl = res
				this.$forceUpdate()
				if(this.fileNum1[item.data].verifyId){
					updateYzImg({
						verifyUrl: res,
						verifyId: this.fileNum1[item.data].verifyId,
						verifyName: this.fileNum1[item.data].verifyName,
						types: 'zizhi'
					}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: '修改成功',
							type: "success"
						})
					})
				}else{
					addYzImg({
						verifyUrl: res,
						verifyName: this.fileNum1[item.data].verifyName,
						types: 'zizhi'
					}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: '添加成功',
							type: "success"
						})
					})
				}
				console.log(this.fileNum1)
      })
    },
    // 上传文件（金丹企业证书）
    designUpFile2(item) {
			console.log(this.fileNum)
      var formData = new FormData();
      formData.append("file", item.file)
			// formData.append('content',this.fileNum2[item.data].filename)
      uploadFile(formData).then(res => {
        console.log(res)
        this.fileNum2[item.data].verifyUrl = res
				this.$forceUpdate()
				if(this.fileNum2[item.data].verifyId){
					updateYzImg({
						verifyUrl: res,
						verifyId: this.fileNum2[item.data].verifyId,
						verifyName: this.fileNum2[item.data].verifyName,
						types: 'zhengshu'
					}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: '添加成功',
							type: "success"
						})
					})
				}else{
					addYzImg({
						verifyUrl: res,
						verifyName: this.fileNum2[item.data].verifyName,
						types: 'zhengshu'
					}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: '添加成功',
							type: "success"
						})
					})
				}
      })
    },
    // 上传文件（金丹企业荣誉）
    designUpFile3(item) {
			console.log(this.fileNum)
      var formData = new FormData();
      formData.append("file", item.file)
			// formData.append('content',this.fileNum3[item.data].filename)
      uploadFile(formData).then(res => {
        console.log(res)
        this.fileNum3[item.data].verifyUrl = res
				this.$forceUpdate()
				if(this.fileNum3[item.data].verifyId){
					updateYzImg({
						verifyUrl: res,
						verifyId: this.fileNum3[item.data].verifyId,
						verifyName: this.fileNum3[item.data].verifyName,
						types: 'rongyu'
					}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: '添加成功',
							type: "success"
						})
					})
				}else{
					addYzImg({
						verifyUrl: res,
						verifyName: this.fileNum3[item.data].verifyName,
						types: 'rongyu'
					}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: '添加成功',
							type: "success"
						})
					})
				}
      })
		},
		deleteFile(item){
			deleteYzImg(item.verifyId).then(res => {
				console.log(res)
				this.$message({
					showClose: true,
					message: '删除成功',
					type: "success"
				})
				this.getImg()
			})
		}
  }
};
</script>

<style lang="scss" scoped>
// .app-container{
//   background: #fff;
// }
/deep/.el-divider {
	background-color: #18A05E;
	position: relative;
}
/deep/.el-divider--horizontal {
    height: 2px;
}
/deep/.el-divider__text {
	color: #18A05E;
}
.avatar{
	width: 100px;
	height: 100px;
}
.submits{
	position: absolute;
	bottom: 0px;
	right: 0;
	display: flex;
	// background: #ffffff;
	padding: 15px 20px;
	justify-content: flex-end;
	align-items: center;
	>div{
		width: 80px;
		height: 32px;
		text-align: center;
		line-height: 32px;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		margin-left: 30px;
		cursor: pointer;
	}
  .add{
    background: #18A05E;
  }
	.save{
		background: #2196F3;
	}
	.nosave{
		background: #999;
	}
}
.step {
  padding: 20px;
  background: #fff;
}
.addfile{
  width: 80px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  margin-left: 30px;
  background: #18a05e;
  cursor: pointer;
  font-size: 14px;
  font-weight: 100;
  margin: 0px 100px;
}
.change {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 8px;
  padding: 20px 0;
  > p {
    width: 33%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      // width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 100px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
// .submits {
//   display: flex;
//   padding: 20px 20px 0 20px;
// 	margin-top: 20px;
// 	border-top: 1px solid #ccc;
//   justify-content: flex-end;
//   align-items: center;
//   > div {
//     width: 80px;
//     height: 32px;
//     text-align: center;
//     line-height: 32px;
//     color: #fff;
//     font-size: 14px;
//     border-radius: 4px;
//     margin-left: 30px;
//     cursor: pointer;
//   }
//   .save {
//     background: #18a05e;
//   }
//   .nosave {
//     background: #999;
//   }
// }
.avatar-uploader .el-upload {
  border: 1px dashed #999 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.fileup{
	position: relative;
	// height: 500px;
	overflow-y: auto;
  padding: 20px 0 40px 0;
  background: #fff;
  border-radius: 8px;
  // margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
  // align-items: center;
  // justify-content: space-between;
	.uping{
		width: 32%;
		display: flex;
		position: relative;
		flex-wrap: wrap;
		flex-direction: column;
		&:hover .delete{
			display: block;
		}
		> p {
		  width: 90%;
		  font-size: 14px;
		  display: flex;
		  align-items: center;
		  color: #333;
		  /deep/.el-input__inner {
		    // width: inherit;
		    background: none;
		    height: 32px;
		    // line-height: 32px;
		    color: #333;
		    border: 1px solid rgba(0, 0, 0, 0.1);
		    padding: 0 25px;
		  }
		  /deep/.el-input__icon {
		    line-height: 32px;
		  }
		  /deep/.el-upload-dragger {
				width: 100%;
		    height: 100px;
		  }
		  /deep/.el-upload-dragger .el-icon-upload {
		    font-size: 60px;
		    color: #C0C4CC;
		    margin: 0; 
		    line-height: 1;
				width: 100%;
		  }
			/deep/.el-upload {
				width: 100%;
			}
		  .userselect {
		    // max-width: 250px;
		    flex: 1;
		  }
		
		  > span {
		    display: block;
		    width: 100px;
		    text-align: right;
		    padding-right: 15px;
		  }
		  > input {
		    width: inherit;
		    flex: 1;
		    height: 32px;
		    border-radius: 3px;
		    border: 1px solid rgba(0, 0, 0, 0.1);
		    padding-left: 10px;
		    color: #333;
		  }
		  >div{
		    width: 100px;
		    // flex: 1;
		  }
		}
		.delete{
			position: absolute;
			z-index: 99;
			top: 0px;
			right: 10px;
			cursor: pointer;
			transition: all .5s;
			display: none;
		}
	}
}
</style>